<template>
    <div class="max-width" style="display: block;margin: auto;">
        <div style="display: flex; justify-content: center; font-size: 5rem;text-transform: capitalize;margin-top:8rem;">
            recent products
        </div>
        <div style="display:flex;justify-content: center;font-size:2rem;color:gray;margin-top:1rem;">our newest
            dining,desk,coffee,and side tables
        </div>
        <div class="recent">
            <router-link :to="'/detail?id='+data.recent1.id" v-if="data.recent1">
                <img-hover class="img" :img1="data.recent1.img1.fullUrl" :img2="data.recent1.img2.fullUrl">
                </img-hover>
                <div>{{data.recent1.name}}</div>
            </router-link>
            <router-link :to="'/detail?id='+data.recent2.id" v-if="data.recent2">
                <img-hover class="img"   :img1="data.recent2.img1.fullUrl" :img2="data.recent2.img2.fullUrl">
                </img-hover>
                <div>{{data.recent2.name}}</div>
            </router-link>
            <router-link :to="'/detail?id='+data.recent3.id" v-if="data.recent3">
                <img-hover class="img"   :img1="data.recent3.img1.fullUrl" :img2="data.recent3.img2.fullUrl">
                </img-hover>
                <div>{{data.recent3.name}}</div>
            </router-link>
            <router-link :to="'/detail?id='+data.recent4.id" v-if="data.recent4">
                <img-hover class="img"  :img1="data.recent4.img1.fullUrl" :img2="data.recent4.img2.fullUrl">
                </img-hover>
                <div>{{data.recent4.name}}</div>
            </router-link>
        </div>
    </div>
</template>
<script>
    import imgHover from "../../components/ImgHover"
    export default {
        components:{imgHover},
        props: {
            value: {
                type: Object, default() {
                    return {
                        recent1: {img1: {},img2:{}},
                        recent2: {img1: {},img2:{}},
                        recent3: {img1: {},img2:{}},
                        recent4: {img1: {},img2:{}}
                    }
                }
            }
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
        methods: {}
    }

</script>
<style>
    .recent {
        display: flex;
        justify-content: space-around;
        margin-top: 3rem;
        flex-wrap:wrap;
    }

    .recent .img {
        height: 24rem;
        width: 24rem;
        margin: auto;
    }

    .recent > * {
        flex: 1;
        text-align: center;
    }

    .recent a div:last-child{
        margin-top:10px;
    }

    @media screen and (max-width: 60rem) {
        .recent .img{
            width:90vw;
            height:90vw;
        }
    }
</style>
